<template>
  <div>
    <!-- 头部区域 -->
    <div class="page-header">
      <div class="title-section">
        <h1 class="page-title">Banner管理</h1>
      </div>
    </div>

    <el-card>
      <div class="flex justify-end">
        <el-button size="large" type="danger" @click="openBannerFormModal">添加图片</el-button>
      </div>

      <!-- 搜索区域 -->
      <div class="search_box margin-top-sm">
        <el-form ref="searchFormRef" :model="queryInfo" label-width="120px" class="search-box">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item prop="order_no" label="类型:">
                <Select :data="positionType" v-model="queryInfo.position" @change="searchTable" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="margin-top">
      <el-table ref="multipleTableRef" :data="listData" style="width: 100%">
        <el-table-column type="selection" width="55" />

        <el-table-column property="id" label="id"></el-table-column>

        <el-table-column label="图片">
          <template #default="scope">
            <el-image :src="scope.row.img" style="width: 100px;height: 100px;"></el-image>
          </template>
        </el-table-column>

        <el-table-column label="类型">
          <template #default="scope">
            <div v-for="item in positionType" :key="item.value">
              <el-tag v-if="item.value == scope.row.position">{{ item.label }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column property="add_time" label="创建时间"> </el-table-column>

        <el-table-column label="操作" width="300">
          <template #default="scope">
            <div class="flex align-center">
              <el-button class="margin-left-xs" size="small" type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页区域 -->
    <!-- <div class="margin-top">
      <Pagination :total="total" @change="changePage" />
    </div> -->

    <BannerFormModal :positionType="positionType" ref="bannerFormModalRef" @reload="searchTable" />
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { ref, reactive, computed, toRef, onMounted, watch } from 'vue'
import Select from '@/components/admin/Select.vue'
import { useRoute } from 'vue-router'
import useTableHook from '@/hooks/useTableHook'
import { GetOrderListApi, bannerAddAndEdit, ShopBannerAddAndEditApi } from '@/api/index'
import { RefreshRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/admin/Pagination.vue'
import BannerFormModal from './BannerFormModal.vue'

const positionType = [
  {
    label: '首页Banner',
    value: 0
  },
  {
    label: '店铺banner',
    value: 1
  },
  {
    label: '店铺封面',
    value: 2
  }
]

const queryInfo = ref({
  method: 'list',
  position: ''
})

const searchFormRef = ref<FormInstance>()

// 重置表格
const resetTable = () => {
  searchFormRef.value.resetFields()

  queryInfo.value.start_time = ''

  queryInfo.value.end_time = ''

  searchTable()
}

const changeDate = (record) => {
  queryInfo.value.start_time = queryInfo.value.dates[0]
  queryInfo.value.end_time = queryInfo.value.dates[1]
  searchTable()
}

const handleDelete = (record) => {
  ElMessageBox.confirm(`确认删除id: ${record.id}`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    try {
      const res = await bannerAddAndEdit({ method: 'delete', id: record.id, position: record.position })

      ElMessage({
        type: 'success',
        message: '删除成功'
      })

      searchTable()
    } catch (error) {
      ElMessage({
        type: 'error',
        message: error.msg
      })
    }
  })
}

const bannerFormModalRef = ref()

const openBannerFormModal = () => {
  bannerFormModalRef.value.open()
}

onMounted(() => {
  initTable()
})

const {
  total,
  listData,
  searchTable,
  initTable,
  changePage,
} = useTableHook(queryInfo.value, bannerAddAndEdit, { resType: 4 })
</script>

<style lang="scss" scoped>
/* 头部区域样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.merchant-name {
  color: #e74c3c;
}

.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #7f8c8d;
  text-decoration: none;
  transition: color 0.3s;
  margin-top: 5px;
}

.back-link:hover {
  color: #e74c3c;
}

.back-link i {
  margin-right: 5px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #c0392b;
}

.btn-primary i {
  margin-right: 5px;
}
</style>
